<template>
  <div class="layout-container">
    <div class="layout-container-form" style="flex-direction: column">
      <div class="layout-container-form-search">
        <el-row style="text-align: left">
          <el-col :span="24">
            <el-form label-width="0px" :inline="false">
              <el-form-item style="width:100%; margin-bottom:5px;">
                <div class="notice-title">
                  主页公告
                </div>
                <div class="notice-content">
                  <el-input type="textarea" v-model="form.noticeContent" placeholder="请输入主页公告" rows="3" maxlength="400" show-word-limit></el-input>
                </div>
              </el-form-item>
              <el-form-item style="width:100%; margin-bottom:5px;">
                <el-button
                  type="primary"
                  :disabled="!form.status"
                  @click="handlecancel"
                >
                  取消发布
                </el-button>
                <el-button
                @click="handleEdit"
                >
                  修改
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="layout-container-opt">
        <el-row>
          <el-col :span="24" >
             <el-radio-group v-model="tabList.value" @change="chagneTab" >
              <el-radio-button 
                :label="item.value"
                v-for="(item, index) in tabList.list" 
                :key="index">{{item.label}}</el-radio-button>
            </el-radio-group>
            <el-button
              type="primary"
              @click="handleAdd"
              style="margin-left: 20px"
            >
              新建通知
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="layout-container-table">
        <Table ref="table" v-model:page="page" v-loading="loading" :showSelection="false"
       :data="tableData"
        @getTableData="getTableData" @selection-change="handleSelectionChange">
            <el-table-column 
            v-for="(item,index) in columns" :type="item.type" :key="index"
            :label="item.label"
            :width="item.width"
            :align="item.align || 'center'"
            :property="item.property">
                <template  #default="scope">
                    <span :class="[item.classes]" v-html="scope.row[item.property]"></span>
                </template>
            </el-table-column>
            <el-table-column  :align="'center'" label="审核详情" width="180">
                <template #default="scope">
                    <el-button type="text"   @click="handleOpt(scope.row, 'del')">删除</el-button>
                </template>
            </el-table-column>
      </Table>

      <!-- <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showSelection="false"
        :data="tableData"
        @getTableData="getTableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="content"
          label="通知内容"
          align="left"
        >
          <template #default="scope">
						{{scope.row.content}}
          </template>
        </el-table-column>
        <el-table-column prop="permissions" label="项目权限" width="200">
          <template #default="scope">
            <div>
              {{scope.row.permissions}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="200">
          <template #default="scope">
            <div v-if="scope.row.status !== 0">
              已发送
            </div>
            <div v-else>
              未发送
            </div>
            <div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('message.common.handle')"
          align="center"
          fixed="right"
          width="200"
        >
          <template #default="scope">
            <el-button type="text" class="opt-del" @click="handleOpt(scope.row, 'del')">
              {{ $t("message.common.del") }}
            </el-button>
          </template>
        </el-table-column>
      </Table> -->
    </div>
  </div>
</template>




<script setup lang="ts">
import { defineComponent, ref, reactive ,onActivated} from "vue";
import { Page } from "@/components/table/type";
import { ElMessage, ElMessageBox } from "element-plus";
import Table from "@/components/table/index.vue";
import { getMessageList, delMessage, editHomeNotice, getHomeNotice } from "@/api/service/message.ts";

import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()

// 存储搜索用的数据
const query = reactive({
  dateRange: [], // 上线时间
});
// 主页公告
const form = reactive({
  noticeContent: '',
  status: 0
})
const columns = ref([])
const columns1 = reactive([
    {
        label:'通知内容',
        property:'content',
        align:'left',
    },{
        label:'通知类型',
        property:'msg_type_name',
        width:'200',
    },{
        label:'发送数量',
        property:'send_count_name',
        width:'200',
    },{
        label:'状态',
        property:'statusName',
        width:'200',
    },
])
const columns2 = reactive([
    {
        label:'通知内容',
        property:'content',
        align:'left',
    },{
        label:'项目权限',
        property:'permissions',
        width:'200',
    },{
        label:'状态',
        property:'statusName',
        width:'200',
    },
])


columns.value = columns1


const tabList = reactive({
  value:1,
  list:[
    {
      label:'全局通知',
      value:1
    }, {
      label:'项目通知',
      value:2
    }
  ]
})

const chagneTab = (e)=>{
  debugger
  if(e == 1){
    columns.value = columns1
  }else{
    columns.value = columns2
  }
  getTableData(true)
}
// 主页公告详情
const getHomeNoticeFun = () => {
  getHomeNotice().then((res: any) => {
    if (res.code === 200){
      let data = res.data
      form.noticeContent = data.content
      form.status = data.status
    }
  })
}
getHomeNoticeFun()

//新建项目通知
const handleAdd = () => {
  router.push({
    path: '/backstagerpzzm/notificationMessage/addNotification',
    query:{type:tabList.value}
  })
}
// 取消发布
const handlecancel = () => {
  editHomeNoticeFun(0)
}
// 修改
const handleEdit = () => {
  if (!form.noticeContent) {
      ElMessage.error("请输入主页公告内容");
      return;
  }
  editHomeNoticeFun(1)
}
const editHomeNoticeFun = (status: Number) => {
  let data = {
    content: status ? form.noticeContent : undefined,
    status: status // 1:发布 0:取消发布
  }
  editHomeNotice(data).then((res: any) => {
    if (res.code === 200) {
      let msg = status ? '发布成功' : '取消发布成功';
      form.status = status;
      ElMessage.success(msg);
    }
  })
}

// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 50,
  total: 0,
});
const loading = ref(false);
const tableData = ref([]);
// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: Boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    page: page.index,
    page_size: page.size,
    msg_classification:tabList.value,
    ...query,
  };
  getMessageList(params)
    .then((res: any) => {
      let data = res.data.list;
      data.forEach((d: any) => {
        d.loading = false;
        d.statusName = d.status == 1?'已发送':'未发送'
        d.msg_type_name = d.msg_type == 1?'所有团队':d.msg_type == 2?'团队':'个人'  //1: 所有团队，2: 团队，3: 个人
        d.send_count_name =( d.msg_way == 1?'系统内通知':d.msg_way == 2?'邮件通知':'手机短信通知' )+ '('+ d.send_count +')'   //1: 系统内通知，2: 邮件通知，3: 手机短信通知
      });

      tableData.value = data;
      page.total = Number(res.data.count);
    })
    .catch(() => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};


// 勾选数据
const handleSelectionChange = (data: any) => {

};
// 操作按钮点击事件 
const showArrowFlag = ref(false)
const showArrow = () => {
  showArrowFlag.value = !showArrowFlag.value 
}
// 编辑
const handleOpt = (row: any, type: String) => {
    ElMessageBox.confirm(
    `是否确认当前操作?`,
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success',
    }
  )
  .then(() => {
    if (type === 'del') {
      deleteFun(row.Id)
    }
  })
  .catch(() => {
    
  })
}

// 删除函数
const deleteFun = (id: any) => {
  let data = {
    id:[id],
  };
  delMessage(data)
  	.then((res: any) => {
  		if (res.code == 200) {
  			getTableData(false);
  			ElMessage.success("删除成功！");
  		} else {
  			ElMessage.error("删除失败！");
  		}
  	})
  	.catch(() => false);
};

onActivated(()=>{
  getTableData(true);
})
</script>

<style lang="scss" scoped>
.layout-container-form {
  position: relative;
}
.layout-container-form-search {
  width: 100%;
  display: inline-block !important;
  justify-content: flex-start !important;
  .search-btn{
    margin-right: 10px;;
  }
}
.notice-title{
  margin-bottom: 10px;
}
.notice-content{
  width:100%;
  min-height:50px;
  box-sizing: border-box;
  border-radius: 2px;
  margin-bottom: 10px;
  color: #929292;
}

.layout-container-opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  margin-top: 5px;
}
.split-line{
  margin: 0 8px;
  color: #ccc;
}
.image-slot{
  width: 50px;
  height: 50px;
  background: #fafafa;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}
</style>
